<template>
  <div class="headerInfo">
    <div class="left"></div>
    <div class="content">{{ routeConfig?.meta?.title || "NOTE 后台中心" }}</div>
    <div class="right">
      <span class="welcome">欢迎您！ {{ userData?.userName || "Summer" }}</span>
      <el-dropdown @command="handleCommand" trigger="click">
        <el-avatar :size="50" :src="baseStr + userData.userAttr">
          <img src="../../../public/defaultAttr.svg"></img>
        </el-avatar>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="mySelf">个人中心</el-dropdown-item>
            <el-dropdown-item command="systemCut">系统切换</el-dropdown-item>
            <el-dropdown-item command="AccountCut">
              <el-popover placement="left" title="切换账号" trigger="hover">
                <template #reference>
                  <span style="border: 1px solid #d9d9d9">关联账号</span>
                </template>

                <span
                  class="contextedAccound"
                  v-for="item in userData.connextedAccount"
                  :key="item.userId"
                  @click="handleAccount(item, 'check')"
                >
                  <span>{{ item.userName }}</span>
                  <el-icon @click.stop="handleAccount(item, 'remove')"
                    ><Minus color="red"
                  /></el-icon>
                </span>
                <p v-if="(userData.connextedAccount || []).length < 1">
                  暂无关联账号
                </p>
                <el-button style="width: 100%" @click="handleuserAccout"
                  >关联一个</el-button
                >
              </el-popover>
            </el-dropdown-item>
            <el-dropdown-item command="logOut">退出登陆</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <!-- 关联账号弹窗 -->
      <el-dialog v-model="userAccoutVisble" title="关联用户账号" width="500">
        <el-form ref="ruleFormRef" :rules="rules" :model="formModel">
          <el-form-item label="关联用户ID" prop="userId">
            <el-input v-model="formModel.userId" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="handleClosed">取消</el-button>
            <el-button type="primary" @click="handleOk"> 确定 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts" name="adminHeader">
import { ref } from "vue";
import { Minus } from "@element-plus/icons-vue";
import * as api from "@/api/index";
import router from "@/router/index";
import { useRoute } from "vue-router";
import useUserStore from "@store/userStore";
import { ElNotification as NOT } from "element-plus";
interface AccountType {
  userId: string;
  userName?: string;
  userAccount?: string;
}
let rules = {
  userId: [{ required: true, message: "关联用户ID不能为空" }],
};
// 关联用户弹窗控制器
let userAccoutVisble = ref(false);
// 关联用户校验器
let ruleFormRef = ref(null);
// 关联用户数据
let formModel = ref({
  userId: "",
});
// 路由信息
let routeConfig: any = useRoute();
// 用户信息
let userData: any = useUserStore().userInfo;
let baseStr: string = import.meta.env.config_concat;
console.log(baseStr, 321);

// 关闭关联用户弹窗
function handleClosed() {
  let el: any = ruleFormRef.value;
  userAccoutVisble.value = false;
  el.resetFields();
}
// 关闭关联用户弹窗
function handleOk() {
  let el: any = ruleFormRef.value;
  el.validate((valid: boolean) => {
    if (valid) {
      handleAccount(formModel.value, "add");
      handleClosed();
    }
  });
}
// 头像下拉处理事件
function handleCommand(command: string) {
  if (command === "logOut") {
    useUserStore().clearToken();
    router.push({
      path: "/note/login",
    });
  } else if (command === "AccountCut") {
    //
  } else {
    NOT({
      title: "系统消息",
      type: "warning",
      message: "功能尚未开发、敬请期待！",
    });
  }
}
function handleuserAccout() {
  userAccoutVisble.value = true;
}
function handleAccount(item: AccountType, type: string) {
  console.log(item, "点击的账号");
  if (item.userId) {
    api.User.contextedAccount({ userId: item.userId, type: type }).then(
      (res: BaseResponse<any>) => {
        if (res.header.code === 999) {
          let content = "";
          if (type === "check") {
            useUserStore().clearToken();
            useUserStore().setToken(res.body);
            location.reload();
            content = "账号切换成功！";
          }
          if (type === "remove") {
            let index = userData.connextedAccount.findIndex(
              (items: AccountType) => items.userId === item.userId
            );
            userData.connextedAccount.splice(index, 1);
            content = "已移除关联账号";
          }
          if (type === "add") {
            userData.connextedAccount.push({
              userId: res.body.userId,
              userName: res.body.userName,
              userAccount: res.body.userAccount,
            });
            content = "成功关联该账号";
          }
          NOT({
            title: "系统消息",
            type: "success",
            message: content,
          });
        }
      }
    );
  } else {
    NOT({
      title: "系统消息",
      type: "warning",
      message: "关联账户异常、请联系管理员处理！",
    });
  }
}
</script>

<style lang="less" scoped>
.headerInfo {
  height: 60px;
  box-shadow: 0px 16px 8px -20px #000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 20px;
  box-sizing: border-box;
  z-index: 999;

  .right {
    display: flex;
    justify-content: right;
    align-items: center;

    .welcome {
      margin-right: 14px;
    }
  }
}
.contextedAccound {
  display: flex;
  height: 30px;
  width: 100%;
  padding: 0px 8px;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  cursor: default;
  .el-icon {
    cursor: pointer;
  }
  &:hover {
    background-color: beige;
  }
}
</style>
